<template>
  <el-select
    v-model="value"
    v-bind="$attrs"
    :id="'c' + formItemMeta.columnId"
    :name="'c' + formItemMeta.columnId"
    :clearable="clearable"
    multiple
    filterable
    allow-create
    default-first-option
    :collapse-tags="collapseTags"
    :collapse-tags-tooltip="collapseTagsTooltip"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script lang="ts">
  import { defineComponent } from 'vue'
  // import { ElSelect, ElOption } from 'element-plus'
  // 引入组件需要的属性 引入表单子控件的管理类
  import { itemProps, itemController, loadController } from '../map'

  export default defineComponent({
    name: 'nf-el-from-select-find',
    inheritAttrs: false,
    components: {
      // ElSelect, ElOption
    },
    props: {
      modelValue: [String, Number, Array],
      'collapse-tags': {
        type: Boolean,
        default: true
      },
      'collapse-tags-tooltip': {
        type: Boolean,
        default: true
      },
      colName: String, // 变更字段名称
      ...itemProps // 基础属性
    },
    emits: ['update:modelValue'],
    setup (props, context) {
      const { value } = itemController(props, context.emit)

      const options = {
        options: [{
          value: 'HTML',
          label: 'HTML'
        }, {
          value: 'CSS',
          label: 'CSS'
        }, {
          value: 'JavaScript',
          label: 'JavaScript'
        }],
        value: []
      }

      // 从后端获取数据
      const { loadDict } = loadController(props)
      loadDict()

      return {
        value,
        options
      }
    }
  })
</script>
